/*
 * @Author: hechengfei h349187021@163.com
 * @Date: 2022-08-15 18:56:05
 * @LastEditors: hechengfei h349187021@163.com
 * @LastEditTime: 2022-08-15 19:48:10
 * @FilePath: \xiangmu\src\components\workallocation\WorkallocationNav.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useState } from 'react'
import {
    BrowserRouter as Router, // history模式，
    Route, // 路由的定义
    Routes, //只匹配一个
    Link,
} from 'react-router-dom'
import AllDepartments from './AllDepartments'
import DeploymentRecord from './DeploymentRecord'
import ListReviewed from './ListReviewed'
import '../../assets/css/workallocation/WorkallocationNav.css'
export default function WorkallocationNav() {
    const [ischangji, setchangji] = useState(0)
    const changeclickcolor = (e) => {
        setchangji( e.currentTarget.getAttribute("data-index"))
       
    }
    return (
        <>
            <Router>
                <div>
                    <ul className='workAllocationHeader'>
                        <li><button className='ContractAlingcenter' id={"0" === ischangji ? "changeclickcolor" : ""}
                            onClick={changeclickcolor}
                            data-index="0"
                        ><Link to='/AllDepartments'>所有部门</Link ></button></li>
                        <li><button className='ContractAlingcenter' id={"1" === ischangji ? "changeclickcolor" : ""}
                            onClick={changeclickcolor}
                            data-index="1"><Link to='/DeploymentRecord'>调配/申请记录</Link></button></li>
                        <li><button className='ContractAlingcenter' id={"2" === ischangji ? "changeclickcolor" : ""}
                            onClick={changeclickcolor}
                            data-index="2"><Link to='/ListReviewed'>待审核列表</Link></button></li>
                    </ul>
                </div >
                <Routes>
                    <Route index element={<AllDepartments />}></Route>
                    <Route path='/AllDepartments' element={<AllDepartments />}></Route>
                    <Route path='/DeploymentRecord' element={<DeploymentRecord />}></Route>
                    <Route path='/ListReviewed' element={<ListReviewed />}></Route>
                </Routes>
            </Router>
        </>

    )
}
